<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <% const {APP_NAME} = require('../packager/brand.js'); %>
    <title><%= APP_NAME %> - Convert Scratch projects to HTML, EXE, and more</title>
    <meta name="description" content="Converts Scratch 3, 2, or 1 projects into HTML files, zip archives, or executable programs for Windows, macOS, and Linux. Faster and more customizable than HTMLifier and forkphorus.">
    <style>
      body[p4-splash-theme="dark"]:not([p4-loaded]) {
        background-color: #111;
        color-scheme: dark;
      }
      .input-for-remembering-project-file {
        display: none;
      }
    </style>
  </head>
  <body>
    <noscript>This page requires JavaScript.</noscript>
    <!-- This element needs to exist in the HTML for some browsers to autocomplete it. -->
    <input type="file" class="input-for-remembering-project-file" autocomplete="on">
    <div id="app"></div>
    <script>
      (function() {
        // This logic is only for the "splash" screen.
        // It's used to prevent a momentary white screen while the page is loading in dark mode.
        var theme = 'system';
        try {
          var local = localStorage.getItem('P4.theme')
          if (typeof local === 'string') theme = local;
        } catch (e) { /* ignore */ }
        if (theme === 'system') theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
        document.body.setAttribute('p4-splash-theme', theme);
      })();
    </script>
  </body>
</html>
